<template>
    <div class="loginContainer">
      <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;" @click="back">返回</el-button>
      <svg viewBox="0 0 660 300">
        <defs>
          <filter id="comform">
            <feImage :href="image1" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="ORIGIN_IMAGE"></feImage>
            <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.9 0" in="ORIGIN_IMAGE" result="GRAY_IMAGE"></feColorMatrix>
            <feDisplacementMap in="SourceGraphic" in2="GRAY_IMAGE" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
            <feBlend in="BG" in2="OPACITY_TEXT" MODE="multiply" result="BLENDED_TEXT"></feBlend>
        </filter>
        </defs>
        <image href="../../assets/moon.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></image>
        <text width="50%" height="50%" x="60" y="120" font-size="5em" font-weight="bold" text-anchor="left" fill="#000" :filter="`url(#comform)`">文字贴合背景</text>
      </svg>
    </div>
  </template>
<!-- SVG文字贴合背景 -->
<script lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import image1 from '/@/assets/moon.png';

export default {
  setup() {
    const back = () => {
      window.history.back();
    };

    return {
      back,
      image1,
    };
  },
};
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    margin-bottom: 10px;
    cursor: pointer;
}
</style>
